<template>
    <a-modal
            :width="1370"
            :visible="visible"
            :confirmLoading="confirmLoading"
            @cancel="handleCancel"
    >
        <iframe :src="reportUrl" frameborder="0" style="width:100%;height:750px;" id="iframeBox"></iframe>
        <template slot="footer">
            <a-button @click="handleCancel">关闭</a-button>
        </template>
    </a-modal>
</template>

<script>
    import pick from 'lodash.pick'
    import { getAction } from '@/api/manage'
    import VueQr from 'vue-qr';
    import html2canvas from 'html2canvas'
    import { saveAs } from 'file-saver'
    import JSZip from 'jszip'

    export default {
        name: 'EyeStudentQrcodesPt',
        components: {VueQr},
        data () {
            return {
                visible: false,
                confirmLoading: false,
                size:512,
                formInfo: {},
                stulist:[],
                visible: false,
                confirmLoading: false,
                formInfo: {},
                reportUrl:'',
                edt:false,
                btntxt:'二维码转化中，请稍等',
                url: {
                    saveInfo: '/system/eyeStudent/save',
                    getInfo: '/system/eyeStudent/info',
                    getInfos: '/system/eyeStudent/infos'
                }
            }
        },
        created () {
        },
        methods: {
            edit (ids) {
                this.confirmLoading = true
                this.btntxt=''
                if (ids) {
                    getAction(this.url.getInfos, { 'ids': ids }).then(res => {
                        this.$nextTick(() => {
                            this.stulist=res.result.data
                            localStorage.setItem('qrcodesPt', JSON.stringify(res.result.data))
                            this.reportUrl = "../printQrcode.html?infoid="+ids
                        })
                    })
                }
                this.visible = true
            },
            async getcanvas(){
                console.log('111')
                let flag = 0
                this.stulist.forEach(v => {
                    console.log(v.name)
                    const canvasBox = document.getElementById(v.shorter)
                    console.log(canvasBox)
                    html2canvas(canvasBox).then(canvas => {
                        const dataURL = canvas.toDataURL('image/png')
                        const datas = {'name':v.name,'dataURL':dataURL}
                        this.canvallist.push(datas)
                        if (flag === this.stulist.length - 1) {
                             this.confirmLoading = false
                            this.btntxt='下载二维码'
                        }
                        flag++
                    })
                })
            },
            // 确定
            handleSubmit () {
                this.visible = false
            },
            // 关闭
            handleCancel () {
                this.close()
            },
            close () {
                this.stulist=[]
                this.reportUrl = ''
                localStorage.removeItem('qrcodesPt')
                this.visible = false
            },
            downloadQrcode() {

                if(!this.confirmLoading) {
                    this.btntxt='下载中...'
                    this.confirmLoading = true
                    // window.pageYoffset = 0
                    // document.documentElement.scrollTop = 0
                    // document.body.scrollTop = 0
                    const zip = new JSZip()
                    const imgFolder = zip.folder('images')
                    let flag = 0
                    this.canvallist.forEach(v => {
                        // const canvasBox = document.getElementById(v.shorter)

                        // html2canvas(canvasBox).then(canvas => {
                        //     const dataURL = canvas.toDataURL('image/png')
                        const dataURL = v.dataURL
                            // 下载
                            const base64 = dataURL.split('base64,')[1]
                            imgFolder.file(v.name + '.png', base64, {base64: true}) // 文件名
                            if (flag === this.stulist.length - 1) {
                                zip.generateAsync({type: 'blob'}).then((blob) => {
                                    saveAs(blob, '二维码图片.zip') // 压缩包名字
                                    this.confirmLoading = false
                                    this.btntxt='下载二维码'
                                })
                            }
                            flag++
                        // })
                    })
                }

                // 设置下载链接的href属性和download属性（如果需要下载功能）

            }
        }
    }
    async function fetchData(data) {
        try {
            let flag = 0
            var cl = []
            data.forEach(v => {
                console.log(v.name)
                const canvasBox = document.getElementById(v.shorter)
                console.log(canvasBox)
                html2canvas(canvasBox).then(canvas => {
                    const dataURL = canvas.toDataURL('image/png')
                    cl.push(dataURL)
                    if (flag === data.length - 1) {
                        return cl
                    }
                    flag++
                })
            })
            // 处理数据
        } catch (error) {
            console.error('Error fetching data:', error);
        }
    }
</script>
<style scoped>
    .qrv{
        display: flex;
        flex-wrap: wrap;
        justify-content:space-between;
    }
    .qr-item{
        width: 200px;
        text-align: center;
        align-items: center;
        margin: 10px auto;
    }
</style>
